<template>
  <!-- @mouseout.stop="aaaa($event)" -->
  <div ref="container" class="container-content">
    <div class="items" v-for="(e, i) in paramList" :key="i" v-append="{
      el: e.typeEl,
      options: e
    }" />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import Vue from 'vue';
import lisRoot from './components/lisRoot'
// import lisNumber from './components/lisNumber'
// import lisSelect from './components/lisSelect'
// import lisCheckbox from './components/lisCheckbox'
// import lisText from './components/lisText'
// // import lisPath from './components/lisPath'
// import lisDatabase from './components/lisDatabase'
// import lisCode from './components/lisCode'
import lisAction from './components/lisAction'
import lisSequence from './components/lisSequence'
import lisSelect from './components/lisSelect'
import lisUnit from "./components/lisUnit";
import lisSimpleParallel from "./components/lisSimpleParallel";
// import { debounce } from '@/utils/tool'
export default {
  name: "container",
  data() {
    return {
      paramList: [],
      templateMap: {
        "root": Vue.extend(lisRoot),
        "action": Vue.extend(lisAction),
        "sequence": Vue.extend(lisSequence),
        "select": Vue.extend(lisSelect),
        "simpleParallel": Vue.extend(lisSimpleParallel),
        "unit": Vue.extend(lisUnit),
      },
      defaultValue: {}
    };
  },
  mounted() {
    this.$EventBus.$on('defaultValue', e => {
      this.defaultValue = e
      const cell = this.graph.getSelectedCells()[0]
      cell.store.data.value= this.defaultValue
      console.log("cell",cell)
      this.optForNode(cell)
    })
    console.log("this.containerData",this.containerData)
    this.getParamList(this.containerData.containerDetail)
  },

  computed: mapState({
    containerData: state => state.dagStore.containerData,
    graph: state => state.dagStore.graph,
  }),
  watch: {
    containerData: {
      handler(val) {
        console.log("val",val)
        this.getParamList(val.containerDetail)
      },
      // 开启深度监听
      deep: true
    }
  },
  methods: {
    ...mapActions(['assignGraph']),
    ...mapActions(['getModelShapes', 'assignGraph', 'optForNode', 'unOptForNode']),
    getParamList(list) {
      console.log("list",list)
      this.paramList = []
      let temp = []
      let canvas_id = this.$route.query.canvas_id
      list.forEach(ele => {
        console.log("ele.type",ele.type)
        let Controller = this.templateMap[ele.type]
        let controller = new Controller()
        controller.ref="child"
        
        controller.data = ele.defaultValue
        for (let i in ele) {
          if (ele[i] == 'True') {
            ele[i] = true
          }
          if (ele[i] == 'False') {
            ele[i] = false
          }
        }
        ele.canvas_id = canvas_id
        temp.push({
          type: ele.type,
          content: ele,
          dagStructure: this.dagStructure,
          typeEl: controller
        })
      })
      setTimeout(() => {
        this.paramList = temp
        console.log(temp)
      })
    },
    // aaaa($event) {
    //   $event.stopPropagation();
    //   debounce(() => {
    //     this.paramList[0].content.defaultValue = this.defaultValue1
    //   }, 700)()
    // }
    saveParamList() {

    }
  },
  destroyed() {
    this.paramList[0].content.defaultValue = this.defaultValue1
  },
};
</script>

<style lang="less" scoped>
.items {
  padding-bottom: 20px;
}

.container-content {
  padding-top: 20px;
}
</style>
